<template>
  <li class="index-comment">
    <div class="comment-block-container"><small class="comment-block-time" v-text="rate.rated_at"></small> <img class="comment-block-avatar" src="https://fuss10.elemecdn.com/c/f5/d0b0f2fc83f3ac3e4a0cfae891256png.png?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/">
      <div class="comment-block-content">
        <h3 class="comment-block-username" v-text="rate.username"></h3>
        <div class="rating-wrapper">
          <Star-Rating :score = "rate.rating_star"></Star-Rating>
        </div> <span class="comment-block-rating" v-text="rate.time_spent_desc"></span>
        <div class="comment-block-reply" v-if="rate.reply_text">商家回复：{{rate.reply_text}}</div>
        <ul class="comment-block-photos">
          <li v-for="(img, idx) in rateImgs" :key="idx"><img :src="img.image_hash|formatImg"></li>
        </ul>
        <div>
          <ul class="comment-block-foods">
            <li  v-for="(txt, idx) in rate.item_ratings" :key="idx" v-text="txt.food_name"></li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</template>
<script>
  import StarRating from '../common/StarRating'
  export default {
    name: 'ShopRateItem',
    data () {
      return {
      }
    },
    props: {
      rate: {
        type: Object
      }
    },
    computed: {
      rateImgs: function () {
        return this.rate.item_ratings.filter(function (item) {
          return item.image_hash !== ''
        })
      }
    },
    filters: {
      formatImg: function (value) {
        return 'https://fuss10.elemecdn.com/' + value.charAt(0) + '/' + value.substr(1, 2) + '/' + value.slice(3) + '.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/'
      }
    },
    methods: {

    },
    components: {
      StarRating
    }
  }
</script>
<style></style>
